<template>
<view>
<view class="main" v-if="!showEmedia&&!showmultiEmedia">
	<chat-suit-audio id="chat-suit-audio" :username="username" :chatType="chatType" @newAudioMsg="saveSendMsg"></chat-suit-audio>

	<chat-msglist id="chat-msglist" :username="username" @render="onRender" @clickMsg="onClickInviteMsg" @msglistTap="normalScroll"></chat-msglist>
</view>
	<chat-inputbar id="chat-inputbar" :username="username" :chatType="chatType" @newTextMsg="saveSendMsg" @newImageMsg="saveSendMsg" @newLocationMsg="saveSendMsg" @newVideoMsg="saveSendMsg" @tapSendAudio="toggleRecordModal" @inputFocused="shortScroll" @inputBlured="normalScroll" @makeVideoCall="onMakeVideoCall" @makeAudioCall="onMakeAudioCall" :style="'display: ' + inputbarVisible"></chat-inputbar>
		
	<chat-multiEmedia :style="'display: ' + multiEmediaVisible" :username="username" :groupId="groupId" :action="emediaAction" @inviteMember="onInviteMember" @createConfrSuccess="onCreateConfrSuccess" @hangup="onHangup" v-if="showmultiEmedia"></chat-multiEmedia>

	<chat-emediaInvite :username="username" :action="action" @startConfr="onStartConfr" @goBack="onGoBack" v-if="showEmediaInvite"></chat-emediaInvite>
</view>
</template>

<script>
let msgStorage = require("./msgstorage");
let msgType = require("./msgtype");
let WebIM = require("../../utils/WebIM")["default"];
import chatMsglist from "./msglist/msglist";
import chatInputbar from "./inputbar/inputbar";
import chatSuitAudio from "./inputbar/suit/audio/audio";
import chatMultiEmedia from "./multiEmedia/multiEmedia";
import chatEmediaInvite from "./emediaInvite/emediaInvite";

export default {
  data() {
    return {
      __comps__: {
        msglist: null,
        inputbar: null,
        audio: null
      },
      pubUrl: '',
      subUrl: '',
      showEmedia: false,
      showmultiEmedia: false,
      showEmediaInvite: false,
      action: null,
      emediaAction: null,
      multiEmediaVisible: 'block',
      inputbarVisible: 'block',
      confrId: '',
      groupId: '',
      confrMember: ""
    };
  },

  components: {
    chatMsglist,
    chatInputbar,
    chatSuitAudio,
    chatMultiEmedia,
    chatEmediaInvite
  },
  props: {
    username: {
      type: Object,
      default: () => ({})
    },
    chatType: {
      type: String,
      default: msgType.chatType.SINGLE_CHAT
    }
  },

  // lifetimes
  created() {},

  beforeMount() {},

  onLoad() {
    console.log('this data >> ', this);
    this.__comps__.inputbar = this.selectComponent("#chat-inputbar");
    this.__comps__.msglist = this.selectComponent("#chat-msglist");
    this.__comps__.audio = this.selectComponent("#chat-suit-audio");
  },

  moved() {},

  destroyed() {},

  methods: {
    toggleRecordModal() {
      this.__comps__.audio.toggleRecordModal();
    },

    normalScroll() {
      this.__comps__.msglist.normalScroll();

      this.__comps__.inputbar.cancelEmoji();
    },

    shortScroll() {
      this.__comps__.msglist.shortScroll();
    },

    saveSendMsg(evt) {
      msgStorage.saveMsg(evt.detail.msg, evt.detail.type);

      this.__comps__.inputbar.cancelEmoji();
    },

    getMore() {
      this.selectComponent('#chat-msglist').getHistoryMsg();
    },

    onMakeVideoCall() {
      this.setData({
        showEmediaInvite: true,
        inputbarVisible: 'none',
        action: 'create' //showEmedia: true

      });
    },

    onStartConfr(data) {
      console.log('发起邀请的回调', data.detail);
      this.setData({
        showEmediaInvite: false,
        showmultiEmedia: true,
        multiEmediaVisible: 'block',
        inputbarVisible: 'none',
        confrMember: data.detail.confrMember,
        emediaAction: {
          action: 'create'
        }
      });

      if (data.detail.action == 'invite') {
        this.sendInviteMsg(data.detail.confrMember, getApp().confrId);
      }
    },

    onGoBack() {
      this.setData({
        showEmediaInvite: false,
        showmultiEmedia: true,
        multiEmediaVisible: 'block',
        inputbarVisible: 'none',
        confrMember: []
      });
    },

    onInviteMember(e) {
      let username = this.username;

      if (!this.username.groupId) {
        username.groupId = e.detail;
      }

      this.setData({
        action: 'invite',
        showEmediaInvite: true,
        inputbarVisible: 'none',
        //showmultiEmedia: false
        multiEmediaVisible: 'none',
        username
      });
    },

    onMakeAudioCall() {
      this.setData({
        showEmediaInvite: true,
        showmultiEmedia: false,
        inputbarVisible: 'none'
      });
    },

    onCreateConfrSuccess(data) {
      console.log('创建会议回调', data);
      this.setData({
        confrId: data.detail.confrId
      });
      getApp().confrId = data.detail.confrId;
      this.sendInviteMsg(this.confrMember, data.detail.confrId, data);
    },

    sendInviteMsg(members, confrId, data) {
      console.log("%c members", "background: green");
      console.log(members);
      members && members.forEach(value => {
        let id = WebIM.conn.getUniqueId();
        let msg = new WebIM.message('txt', id);
        msg.set({
          msg: uni.WebIM.conn.context.userId + ' invite you to video call',
          from: uni.WebIM.conn.context.userId,
          to: value,
          roomType: false,
          chatType: 'chat',
          ext: {
            msg_extension: JSON.stringify({
              inviter: uni.WebIM.conn.context.userId,
              group_id: this.username.groupId
            }),
            roomName: data && data.detail.roomName || '',
            password: data && data.detail.password || '',
            conferenceId: confrId
          },

          success(id, serverMsgId) {
            console.log('发送邀请消息成功 to: ' + value); //disp.fire('em.chat.sendSuccess', id, me.data.userMessage);
          },

          fail(id, serverMsgId) {
            console.log('发送邀请消息失败了');
          }

        }); // if(this.data.chatType == msgType.chatType.CHAT_ROOM){
        // 	msg.setGroup("groupchat");
        // }

        console.log('发送邀请');
        WebIM.conn.send(msg.body);
      });
    },

    onClickInviteMsg(data) {
      console.log('收到邀请消息');
      console.log(data);
      let confrId = data.detail.conferenceId;
      let msg_extension = typeof data.detail.msg_extension == 'string' ? JSON.parse(data.detail.msg_extension) : data.detail.msg_extension;
      let password = data.detail.password || '';
      this.setData({
        emediaAction: {
          action: 'join',
          confrId: confrId,
          password: password,
          roomName: data.detail.roomName || ''
        },
        showEmediaInvite: false,
        showmultiEmedia: true,
        inputbarVisible: 'none',
        groupId: msg_extension.group_id // username: {
        // 	groupId: msg_extension.group_id
        // }

      });
    },

    onHangup() {
      this.setData({
        showEmediaInvite: false,
        showmultiEmedia: false,
        inputbarVisible: 'block'
      });
      getApp().confrId = '';
    },

    onRender() {
      uni.pageScrollTo({
        scrollTop: 5000,
        duration: 300,
        success: function () {
          console.log('滚动成功');
        },
        fail: function () {
          console.log('滚动失败');
        }
      });
    }

  }
};
</script>
<style>
@import "./chat.css";
</style>